<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="店名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getShop">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="Shop" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="店名" width="120" >
			</el-table-column>
			<el-table-column prop="tel" label="电话" width="100" >
			</el-table-column>
			<el-table-column prop="registerTime" label="注册日期" width="100" >
			</el-table-column>
			<el-table-column prop="state" label="状态" width="120" >
				<template scope="scope">
					<span style="color: #11b95c" v-if="radio" label="1">启用</span>
					<span style="color: blue" v-else-if="radio" label="0">待审核</span>
					<span style="color: orange" v-else-if="radio" label="-1">驳回</span>
					<span style="color: red" v-else-if="radio" label="-2">禁用</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="地址" min-width="180" >
			</el-table-column>
			<el-table-column label="操作" width="250">
				<template scope="scope">
					<el-button size="small" @click="approved(scope.$index, scope.row)">审核通过</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
	
	export default {
		data() {
			return {
			    sels:[],
                radio:[],
				listLoading:false,
                Shop:[],
                pageSize:5,
                total:0,
				currentPage:1, // 当前页面
                filters:{
                    name:''
				}

			}
		},
		methods: {
		    // 查询
            getShop(){
                let param = {
                    currentPage:this.currentPage,
                    pageSize:this.pageSize,
                }
                this.$http.post("/shop",param).then(res=>{
                    //res  请求返回的数据
                    this.Shop=res.data.rows;
                    this.total=res.data.total;
                    console.debug(res)
                })

            },

			// 当前页码
            handleCurrentChange(page){
                this.currentPage=page;
                this.getShop();
			},

			// 审核通过
            approved(i,row){
                let para = row;
                this.$confirm('是否同意通过该店铺', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.put("/shop/approved",para).then(res => {
                        if(res.data.success){
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                        }else {
                            this.$message({
                                message:'失败',
                                type:'error'
                            })
                        }
                        // 刷新页面
                        this.getShop();
					})
				})
			}





        },
        mounted() {
		    this.getShop();
        }
	}

</script>

<style scoped>

</style>